From 306890ef9d84316a5c269df5480870785bb6d799 Mon Sep 17 00:00:00 2001 From: Lapo Calamandrei Date: Mon, 21 Jul 2014 18:49:15 +0200 Subject: [PATCH] Adwaita: bit padding overhaul Header-bar and action-bar buttons used to be bigger then others now everything is as big as those, maintaining two different sizes for default widgets depending on the placement is a maintainance nightmare and having controls the same size is good from a usability point of view. --- gtk/resources/theme/Adwaita/_common.scss | 32 ++- .../theme/Adwaita/gtk-contained-dark.css | 254 +++++++++--------- gtk/resources/theme/Adwaita/gtk-contained.css | 246 +++++++++-------- 3 files changed, 277 insertions(+), 255 deletions(-) diff --git a/gtk/resources/theme/Adwaita/_common.scss b/gtk/resources/theme/Adwaita/_common.scss index 96af7d0739..b240e35fc8 100644 --- a/gtk/resources/theme/Adwaita/_common.scss +++ b/gtk/resources/theme/Adwaita/_common.scss @@ -172,7 +172,7 @@ GtkLabel { ****************/ .entry { - padding: 4px; + padding: 5px 8px 6px; border-radius: 3px; transition: all 200ms ease-out; @include entry(normal); @@ -270,7 +270,7 @@ GtkLabel { .button { border-radius: 3px; transition: all 200ms ease-out; - padding: 4px 6px; + padding: 5px 8px 6px; @include button(normal); &:hover, &.flat:hover { @include button(hover); @@ -356,14 +356,13 @@ GtkLabel { } } } - // buttons in header bars and action bars - .header-bar &.button, - .action-bar &.button, - .header-bar &.text-button, - .action-bar &.text-button { padding: 6px 16px 5px; } // due to font metrics - .header-bar &.image-button, - .action-bar &.image-button { padding: 8px; } + &.image-button, + &.image-button { padding: 8px; } + &.text-button { + padding-left: 16px; + padding-right: 16px; + } // stack switcher buttons .action-bar .stack-switcher &.image-button, @@ -376,6 +375,8 @@ GtkLabel { .header-bar .stack-switcher &.text-button { padding-left: 10px; padding-right: 10px; + padding-top: 5px; // I need these two to not get overridden by radio + padding-bottom: 6px; // button style } .stack-switcher > & { padding-left: 0; // subtract the padding which will be added to the @@ -607,6 +608,8 @@ GtkColorButton.button { } &.vertical { .button { + padding-top: 8px; // Same vertical padding as image-buttons + padding-bottom: 8px; // &:first-child { @extend %top_button; @include button(normal, $noedge: true); @@ -655,6 +658,8 @@ GtkColorButton.button { // we should remove the bottom edge hilight here, but seems // like buttons are on top of it so it doesn't show up border-radius: 0; + padding-left: 3px; + padding-right: 3px; } %top_button { border-radius: 3px 3px 0 0; @@ -682,7 +687,7 @@ GtkColorButton.button { * ComboBoxes * **************/ GtkComboBox { - > .button { padding-top: 2px; padding-bottom: 2px; } // Otherwise combos + > .button { padding-top: 3px; padding-bottom: 4px; } // Otherwise combos // are bigger then // buttons -GtkComboBox-arrow-scaling: 0.5; @@ -1456,7 +1461,8 @@ GtkTreeView.view.progressbar { //Progressbar in treeview cells GtkSwitch { // FIXME: backdrop insensinsitive slider on the dark variant - -GtkSwitch-slider-width: 47px; + -GtkSwitch-slider-width: 47px; // 57px is the right value to make it as tall + // as buttons, not doing that for now font: bold condensed 9; outline-offset: -4px; box-shadow: inset 0 1px transparentize(black, 0.9), // needs to be set here @@ -1562,7 +1568,7 @@ $asset_suffix: if($variant=='dark', '-dark', ''); background-image: -gtk-scaled(url("assets/#{$a}#{$as}#{$asset_suffix}.png"), url("assets/#{$a}#{$as}#{$asset_suffix}@2.png")); background-repeat: no-repeat; - background-position: center; + background-position: center center; } } @@ -1644,7 +1650,7 @@ $asset_suffix: if($variant=='dark', '-dark', ''); GtkCheckButton.text-button, GtkRadioButton.text-button { // this is for a nice focus on check and radios text - padding: 1px; + padding: 1px 2px 4px; outline-offset: 0; } diff --git a/gtk/resources/theme/Adwaita/gtk-contained-dark.css b/gtk/resources/theme/Adwaita/gtk-contained-dark.css index 9943920525..f105980f6e 100644 --- a/gtk/resources/theme/Adwaita/gtk-contained-dark.css +++ b/gtk/resources/theme/Adwaita/gtk-contained-dark.css @@ -142,7 +142,7 @@ * Text Entries * ****************/ .entry { - padding: 4px; + padding: 5px 8px 6px; border-radius: 3px; transition: all 200ms ease-out; background-color: transparent; @@ -265,7 +265,7 @@ .button { border-radius: 3px; transition: all 200ms ease-out; - padding: 4px 6px; + padding: 5px 8px 6px; border-style: solid; border-width: 1px; color: #eeeeec; @@ -480,15 +480,18 @@ text-shadow: none; icon-shadow: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(238, 238, 236, 0.1); } - .header-bar .button.button, .action-bar .button.button, .header-bar .button.text-button, .action-bar .button.text-button { - padding: 6px 16px 5px; } - .header-bar .button.image-button, .action-bar .button.image-button { + .button.image-button, .button.image-button { padding: 8px; } + .button.text-button { + padding-left: 16px; + padding-right: 16px; } .action-bar .stack-switcher .button.image-button, .header-bar .stack-switcher .button.image-button { padding: 5px 2px; } .action-bar .stack-switcher .button.text-button, .header-bar .stack-switcher .button.text-button { padding-left: 10px; - padding-right: 10px; } + padding-right: 10px; + padding-top: 5px; + padding-bottom: 6px; } .stack-switcher > .button { padding-left: 0; padding-right: 0; } @@ -702,96 +705,101 @@ GtkColorButton.button { border-width: 0 0 0 1px; } .spinbutton .button:backdrop:insensitive:dir(rtl) { border-width: 0 1px 0 0; } - .spinbutton.vertical .button:first-child { - border-style: solid; - border-width: 1px; - color: #eeeeec; - background-image: linear-gradient(to bottom, #454c4c, #393f3f 40%, #2d3232); - border-color: #1c1f1f; - text-shadow: 0 -1px rgba(0, 0, 0, 0.81176); - icon-shadow: 0 -1px rgba(0, 0, 0, 0.81176); - box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); } - .spinbutton.vertical .button:first-child:active { - border-style: solid; - color: #eeeeec; - border-color: #1c1f1f; - background-image: linear-gradient(to bottom, #232727, #2d3232); - text-shadow: 0 -1px rgba(0, 0, 0, 0.89176); - icon-shadow: 0 -1px rgba(0, 0, 0, 0.89176); - box-shadow: inset 0 2px 1px -2px rgba(0, 0, 0, 0.6); } - .spinbutton.vertical .button:first-child:hover { + .spinbutton.vertical .button { + padding-top: 8px; + padding-bottom: 8px; } + .spinbutton.vertical .button:first-child { border-style: solid; + border-width: 1px; color: #eeeeec; + background-image: linear-gradient(to bottom, #454c4c, #393f3f 40%, #2d3232); border-color: #1c1f1f; - background-image: linear-gradient(to bottom, #5b6464, #434a4a 40%, #393f3f); - text-shadow: 0 -1px rgba(0, 0, 0, 0.77976); - icon-shadow: 0 -1px rgba(0, 0, 0, 0.77976); + text-shadow: 0 -1px rgba(0, 0, 0, 0.81176); + icon-shadow: 0 -1px rgba(0, 0, 0, 0.81176); box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); } - .spinbutton.vertical .button:first-child:insensitive { - border-style: solid; - color: #939695; - border-color: #1c1f1f; - background-image: linear-gradient(to bottom, #323636); - text-shadow: none; - icon-shadow: none; - box-shadow: inset 0 1px rgba(255, 255, 255, 0); } - .spinbutton.vertical .button:first-child:backdrop { - border-style: solid; - color: #c9cbc9; - border-color: #1e2222; - background-image: linear-gradient(to bottom, #393f3f); - text-shadow: none; - icon-shadow: none; - box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); } - .spinbutton.vertical .button:last-child { - border-style: solid; - border-width: 1px; - color: #eeeeec; - background-image: linear-gradient(to bottom, #454c4c, #393f3f 40%, #2d3232); - border-color: #1c1f1f; - text-shadow: 0 -1px rgba(0, 0, 0, 0.81176); - icon-shadow: 0 -1px rgba(0, 0, 0, 0.81176); - box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px rgba(238, 238, 236, 0.1); } - .spinbutton.vertical .button:last-child:active { - border-style: solid; - color: #eeeeec; - border-color: #1c1f1f; - background-image: linear-gradient(to bottom, #232727, #2d3232); - text-shadow: 0 -1px rgba(0, 0, 0, 0.89176); - icon-shadow: 0 -1px rgba(0, 0, 0, 0.89176); - box-shadow: inset 0 2px 1px -2px rgba(0, 0, 0, 0.6), 0 1px rgba(238, 238, 236, 0.1); } - .spinbutton.vertical .button:last-child:hover { + .spinbutton.vertical .button:first-child:active { + border-style: solid; + color: #eeeeec; + border-color: #1c1f1f; + background-image: linear-gradient(to bottom, #232727, #2d3232); + text-shadow: 0 -1px rgba(0, 0, 0, 0.89176); + icon-shadow: 0 -1px rgba(0, 0, 0, 0.89176); + box-shadow: inset 0 2px 1px -2px rgba(0, 0, 0, 0.6); } + .spinbutton.vertical .button:first-child:hover { + border-style: solid; + color: #eeeeec; + border-color: #1c1f1f; + background-image: linear-gradient(to bottom, #5b6464, #434a4a 40%, #393f3f); + text-shadow: 0 -1px rgba(0, 0, 0, 0.77976); + icon-shadow: 0 -1px rgba(0, 0, 0, 0.77976); + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); } + .spinbutton.vertical .button:first-child:insensitive { + border-style: solid; + color: #939695; + border-color: #1c1f1f; + background-image: linear-gradient(to bottom, #323636); + text-shadow: none; + icon-shadow: none; + box-shadow: inset 0 1px rgba(255, 255, 255, 0); } + .spinbutton.vertical .button:first-child:backdrop { + border-style: solid; + color: #c9cbc9; + border-color: #1e2222; + background-image: linear-gradient(to bottom, #393f3f); + text-shadow: none; + icon-shadow: none; + box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); } + .spinbutton.vertical .button:last-child { border-style: solid; + border-width: 1px; color: #eeeeec; + background-image: linear-gradient(to bottom, #454c4c, #393f3f 40%, #2d3232); border-color: #1c1f1f; - background-image: linear-gradient(to bottom, #5b6464, #434a4a 40%, #393f3f); - text-shadow: 0 -1px rgba(0, 0, 0, 0.77976); - icon-shadow: 0 -1px rgba(0, 0, 0, 0.77976); + text-shadow: 0 -1px rgba(0, 0, 0, 0.81176); + icon-shadow: 0 -1px rgba(0, 0, 0, 0.81176); box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px rgba(238, 238, 236, 0.1); } - .spinbutton.vertical .button:last-child:insensitive { - border-style: solid; - color: #939695; - border-color: #1c1f1f; - background-image: linear-gradient(to bottom, #323636); - text-shadow: none; - icon-shadow: none; - box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(238, 238, 236, 0.1); } - .spinbutton.vertical .button:last-child:backdrop { + .spinbutton.vertical .button:last-child:active { + border-style: solid; + color: #eeeeec; + border-color: #1c1f1f; + background-image: linear-gradient(to bottom, #232727, #2d3232); + text-shadow: 0 -1px rgba(0, 0, 0, 0.89176); + icon-shadow: 0 -1px rgba(0, 0, 0, 0.89176); + box-shadow: inset 0 2px 1px -2px rgba(0, 0, 0, 0.6), 0 1px rgba(238, 238, 236, 0.1); } + .spinbutton.vertical .button:last-child:hover { + border-style: solid; + color: #eeeeec; + border-color: #1c1f1f; + background-image: linear-gradient(to bottom, #5b6464, #434a4a 40%, #393f3f); + text-shadow: 0 -1px rgba(0, 0, 0, 0.77976); + icon-shadow: 0 -1px rgba(0, 0, 0, 0.77976); + box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px rgba(238, 238, 236, 0.1); } + .spinbutton.vertical .button:last-child:insensitive { + border-style: solid; + color: #939695; + border-color: #1c1f1f; + background-image: linear-gradient(to bottom, #323636); + text-shadow: none; + icon-shadow: none; + box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(238, 238, 236, 0.1); } + .spinbutton.vertical .button:last-child:backdrop { + border-style: solid; + color: #c9cbc9; + border-color: #1e2222; + background-image: linear-gradient(to bottom, #393f3f); + text-shadow: none; + icon-shadow: none; + box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); } + .spinbutton.vertical .button:backdrop:insensitive { border-style: solid; - color: #c9cbc9; + color: #454c4c; border-color: #1e2222; - background-image: linear-gradient(to bottom, #393f3f); - text-shadow: none; - icon-shadow: none; + background-image: linear-gradient(to bottom, #323636); box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); } - .spinbutton.vertical .button:backdrop:insensitive { - border-style: solid; - color: #454c4c; - border-color: #1e2222; - background-image: linear-gradient(to bottom, #323636); - box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); } .spinbutton.vertical.entry { - border-radius: 0; } + border-radius: 0; + padding-left: 3px; + padding-right: 3px; } .spinbutton.vertical .button:first-child, .spinbutton.vertical .button:first-child:active, .spinbutton.vertical .button:first-child:hover, .spinbutton.vertical .button:first-child:insensitive, .spinbutton.vertical .button:first-child:backdrop { border-radius: 3px 3px 0 0; border-bottom-width: 0; } @@ -809,8 +817,8 @@ GtkComboBox { text-shadow: 0 -1px rgba(0, 0, 0, 0.81176); icon-shadow: 0 -1px rgba(0, 0, 0, 0.81176); } GtkComboBox > .button { - padding-top: 2px; - padding-bottom: 2px; } + padding-top: 3px; + padding-bottom: 4px; } GtkComboBox:insensitive { color: #939695; text-shadow: none; @@ -1644,92 +1652,92 @@ GtkSwitch { .check { background-image: -gtk-scaled(url("assets/checkbox-unchecked-dark.png"), url("assets/checkbox-unchecked-dark@2.png")); background-repeat: no-repeat; - background-position: center; } + background-position: center center; } .check:hover { background-image: -gtk-scaled(url("assets/checkbox-unchecked-hover-dark.png"), url("assets/checkbox-unchecked-hover-dark@2.png")); background-repeat: no-repeat; - background-position: center; } + background-position: center center; } .check:selected { background-image: -gtk-scaled(url("assets/checkbox-unchecked-active-dark.png"), url("assets/checkbox-unchecked-active-dark@2.png")); background-repeat: no-repeat; - background-position: center; } + background-position: center center; } .check:insensitive { background-image: -gtk-scaled(url("assets/checkbox-unchecked-insensitive-dark.png"), url("assets/checkbox-unchecked-insensitive-dark@2.png")); background-repeat: no-repeat; - background-position: center; } + background-position: center center; } .check:backdrop { background-image: -gtk-scaled(url("assets/checkbox-unchecked-backdrop-dark.png"), url("assets/checkbox-unchecked-backdrop-dark@2.png")); background-repeat: no-repeat; - background-position: center; } + background-position: center center; } .check:backdrop:insensitive { background-image: -gtk-scaled(url("assets/checkbox-unchecked-backdrop-insensitive-dark.png"), url("assets/checkbox-unchecked-backdrop-insensitive-dark@2.png")); background-repeat: no-repeat; - background-position: center; } + background-position: center center; } .check:inconsistent { background-image: -gtk-scaled(url("assets/checkbox-mixed-dark.png"), url("assets/checkbox-mixed-dark@2.png")); background-repeat: no-repeat; - background-position: center; } + background-position: center center; } .check:inconsistent:hover { background-image: -gtk-scaled(url("assets/checkbox-mixed-hover-dark.png"), url("assets/checkbox-mixed-hover-dark@2.png")); background-repeat: no-repeat; - background-position: center; } + background-position: center center; } .check:inconsistent:selected { background-image: -gtk-scaled(url("assets/checkbox-mixed-active-dark.png"), url("assets/checkbox-mixed-active-dark@2.png")); background-repeat: no-repeat; - background-position: center; } + background-position: center center; } .check:inconsistent:backdrop { background-image: -gtk-scaled(url("assets/checkbox-mixed-backdrop-dark.png"), url("assets/checkbox-mixed-backdrop-dark@2.png")); background-repeat: no-repeat; - background-position: center; } + background-position: center center; } .check:inconsistent:insensitive { background-image: -gtk-scaled(url("assets/checkbox-mixed-insensitive-dark.png"), url("assets/checkbox-mixed-insensitive-dark@2.png")); background-repeat: no-repeat; - background-position: center; } + background-position: center center; } .check:inconsistent:insensitive:backdrop { background-image: -gtk-scaled(url("assets/checkbox-mixed-backdrop-insensitive-dark.png"), url("assets/checkbox-mixed-backdrop-insensitive-dark@2.png")); background-repeat: no-repeat; - background-position: center; } + background-position: center center; } .check:active { background-image: -gtk-scaled(url("assets/checkbox-checked-dark.png"), url("assets/checkbox-checked-dark@2.png")); background-repeat: no-repeat; - background-position: center; } + background-position: center center; } .check:active:insensitive { background-image: -gtk-scaled(url("assets/checkbox-checked-insensitive-dark.png"), url("assets/checkbox-checked-insensitive-dark@2.png")); background-repeat: no-repeat; - background-position: center; } + background-position: center center; } .check:hover:active { background-image: -gtk-scaled(url("assets/checkbox-checked-hover-dark.png"), url("assets/checkbox-checked-hover-dark@2.png")); background-repeat: no-repeat; - background-position: center; } + background-position: center center; } .check:active:selected { background-image: -gtk-scaled(url("assets/checkbox-checked-active-dark.png"), url("assets/checkbox-checked-active-dark@2.png")); background-repeat: no-repeat; - background-position: center; } + background-position: center center; } .check:backdrop:active { background-image: -gtk-scaled(url("assets/checkbox-checked-backdrop-dark.png"), url("assets/checkbox-checked-backdrop-dark@2.png")); background-repeat: no-repeat; - background-position: center; } + background-position: center center; } .check:backdrop:active:insensitive { background-image: -gtk-scaled(url("assets/checkbox-checked-backdrop-insensitive-dark.png"), url("assets/checkbox-checked-backdrop-insensitive-dark@2.png")); background-repeat: no-repeat; - background-position: center; } + background-position: center center; } .menuitem.check { color: rgba(238, 238, 236, 0.1); @@ -1798,92 +1806,92 @@ GtkSwitch { .radio { background-image: -gtk-scaled(url("assets/radio-unchecked-dark.png"), url("assets/radio-unchecked-dark@2.png")); background-repeat: no-repeat; - background-position: center; } + background-position: center center; } .radio:hover { background-image: -gtk-scaled(url("assets/radio-unchecked-hover-dark.png"), url("assets/radio-unchecked-hover-dark@2.png")); background-repeat: no-repeat; - background-position: center; } + background-position: center center; } .radio:selected { background-image: -gtk-scaled(url("assets/radio-unchecked-active-dark.png"), url("assets/radio-unchecked-active-dark@2.png")); background-repeat: no-repeat; - background-position: center; } + background-position: center center; } .radio:insensitive { background-image: -gtk-scaled(url("assets/radio-unchecked-insensitive-dark.png"), url("assets/radio-unchecked-insensitive-dark@2.png")); background-repeat: no-repeat; - background-position: center; } + background-position: center center; } .radio:backdrop { background-image: -gtk-scaled(url("assets/radio-unchecked-backdrop-dark.png"), url("assets/radio-unchecked-backdrop-dark@2.png")); background-repeat: no-repeat; - background-position: center; } + background-position: center center; } .radio:backdrop:insensitive { background-image: -gtk-scaled(url("assets/radio-unchecked-backdrop-insensitive-dark.png"), url("assets/radio-unchecked-backdrop-insensitive-dark@2.png")); background-repeat: no-repeat; - background-position: center; } + background-position: center center; } .radio:inconsistent { background-image: -gtk-scaled(url("assets/radio-mixed-dark.png"), url("assets/radio-mixed-dark@2.png")); background-repeat: no-repeat; - background-position: center; } + background-position: center center; } .radio:inconsistent:hover { background-image: -gtk-scaled(url("assets/radio-mixed-hover-dark.png"), url("assets/radio-mixed-hover-dark@2.png")); background-repeat: no-repeat; - background-position: center; } + background-position: center center; } .radio:inconsistent:selected { background-image: -gtk-scaled(url("assets/radio-mixed-active-dark.png"), url("assets/radio-mixed-active-dark@2.png")); background-repeat: no-repeat; - background-position: center; } + background-position: center center; } .radio:inconsistent:backdrop { background-image: -gtk-scaled(url("assets/radio-mixed-backdrop-dark.png"), url("assets/radio-mixed-backdrop-dark@2.png")); background-repeat: no-repeat; - background-position: center; } + background-position: center center; } .radio:inconsistent:insensitive { background-image: -gtk-scaled(url("assets/radio-mixed-insensitive-dark.png"), url("assets/radio-mixed-insensitive-dark@2.png")); background-repeat: no-repeat; - background-position: center; } + background-position: center center; } .radio:inconsistent:insensitive:backdrop { background-image: -gtk-scaled(url("assets/radio-mixed-backdrop-insensitive-dark.png"), url("assets/radio-mixed-backdrop-insensitive-dark@2.png")); background-repeat: no-repeat; - background-position: center; } + background-position: center center; } .radio:active { background-image: -gtk-scaled(url("assets/radio-checked-dark.png"), url("assets/radio-checked-dark@2.png")); background-repeat: no-repeat; - background-position: center; } + background-position: center center; } .radio:active:insensitive { background-image: -gtk-scaled(url("assets/radio-checked-insensitive-dark.png"), url("assets/radio-checked-insensitive-dark@2.png")); background-repeat: no-repeat; - background-position: center; } + background-position: center center; } .radio:hover:active { background-image: -gtk-scaled(url("assets/radio-checked-hover-dark.png"), url("assets/radio-checked-hover-dark@2.png")); background-repeat: no-repeat; - background-position: center; } + background-position: center center; } .radio:active:selected { background-image: -gtk-scaled(url("assets/radio-checked-active-dark.png"), url("assets/radio-checked-active-dark@2.png")); background-repeat: no-repeat; - background-position: center; } + background-position: center center; } .radio:backdrop:active { background-image: -gtk-scaled(url("assets/radio-checked-backdrop-dark.png"), url("assets/radio-checked-backdrop-dark@2.png")); background-repeat: no-repeat; - background-position: center; } + background-position: center center; } .radio:backdrop:active:insensitive { background-image: -gtk-scaled(url("assets/radio-checked-backdrop-insensitive-dark.png"), url("assets/radio-checked-backdrop-insensitive-dark@2.png")); background-repeat: no-repeat; - background-position: center; } + background-position: center center; } .menuitem.radio { color: rgba(238, 238, 236, 0.1); @@ -1950,7 +1958,7 @@ GtkSwitch { color: #c9cbc9; } GtkCheckButton.text-button, GtkRadioButton.text-button { - padding: 1px; + padding: 1px 2px 4px; outline-offset: 0; } /************ diff --git a/gtk/resources/theme/Adwaita/gtk-contained.css b/gtk/resources/theme/Adwaita/gtk-contained.css index a40547d0ea..63f87d47a7 100644 --- a/gtk/resources/theme/Adwaita/gtk-contained.css +++ b/gtk/resources/theme/Adwaita/gtk-contained.css @@ -142,7 +142,7 @@ * Text Entries * ****************/ .entry { - padding: 4px; + padding: 5px 8px 6px; border-radius: 3px; transition: all 200ms ease-out; background-color: transparent; @@ -257,7 +257,7 @@ .button { border-radius: 3px; transition: all 200ms ease-out; - padding: 4px 6px; + padding: 5px 8px 6px; border-style: solid; border-width: 1px; color: #2e3436; @@ -472,15 +472,18 @@ text-shadow: none; icon-shadow: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px white; } - .header-bar .button.button, .action-bar .button.button, .header-bar .button.text-button, .action-bar .button.text-button { - padding: 6px 16px 5px; } - .header-bar .button.image-button, .action-bar .button.image-button { + .button.image-button, .button.image-button { padding: 8px; } + .button.text-button { + padding-left: 16px; + padding-right: 16px; } .action-bar .stack-switcher .button.image-button, .header-bar .stack-switcher .button.image-button { padding: 5px 2px; } .action-bar .stack-switcher .button.text-button, .header-bar .stack-switcher .button.text-button { padding-left: 10px; - padding-right: 10px; } + padding-right: 10px; + padding-top: 5px; + padding-bottom: 6px; } .stack-switcher > .button { padding-left: 0; padding-right: 0; } @@ -694,96 +697,101 @@ GtkColorButton.button { border-width: 0 0 0 1px; } .spinbutton .button:backdrop:insensitive:dir(rtl) { border-width: 0 1px 0 0; } - .spinbutton.vertical .button:first-child { - border-style: solid; - border-width: 1px; - color: #2e3436; - background-image: linear-gradient(to bottom, #fafafa, #ededed 40%, #e0e0e0); - border-color: #a1a1a1; - text-shadow: 0 1px rgba(255, 255, 255, 0.76923); - icon-shadow: 0 1px rgba(255, 255, 255, 0.76923); - box-shadow: inset 0 1px white; } - .spinbutton.vertical .button:first-child:active { - border-style: solid; - color: #2e3436; - border-color: #a1a1a1; - background-image: linear-gradient(to bottom, #d6d6d6, #e0e0e0); - text-shadow: 0 1px rgba(255, 255, 255, 0.76923); - icon-shadow: 0 1px rgba(255, 255, 255, 0.76923); - box-shadow: inset 0 2px 1px -2px rgba(0, 0, 0, 0.6); } - .spinbutton.vertical .button:first-child:hover { + .spinbutton.vertical .button { + padding-top: 8px; + padding-bottom: 8px; } + .spinbutton.vertical .button:first-child { border-style: solid; + border-width: 1px; color: #2e3436; + background-image: linear-gradient(to bottom, #fafafa, #ededed 40%, #e0e0e0); border-color: #a1a1a1; - background-image: linear-gradient(to bottom, white, #f7f7f7 40%, #ededed); text-shadow: 0 1px rgba(255, 255, 255, 0.76923); icon-shadow: 0 1px rgba(255, 255, 255, 0.76923); box-shadow: inset 0 1px white; } - .spinbutton.vertical .button:first-child:insensitive { - border-style: solid; - color: #8d9091; - border-color: #a1a1a1; - background-image: linear-gradient(to bottom, #f4f4f4); - text-shadow: none; - icon-shadow: none; - box-shadow: inset 0 1px rgba(255, 255, 255, 0); } - .spinbutton.vertical .button:first-child:backdrop { - border-style: solid; - color: #54595a; - border-color: #a8a8a8; - background-image: linear-gradient(to bottom, #ededed); - text-shadow: none; - icon-shadow: none; - box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); } - .spinbutton.vertical .button:last-child { - border-style: solid; - border-width: 1px; - color: #2e3436; - background-image: linear-gradient(to bottom, #fafafa, #ededed 40%, #e0e0e0); - border-color: #a1a1a1; - text-shadow: 0 1px rgba(255, 255, 255, 0.76923); - icon-shadow: 0 1px rgba(255, 255, 255, 0.76923); - box-shadow: inset 0 1px white, 0 1px white; } - .spinbutton.vertical .button:last-child:active { - border-style: solid; - color: #2e3436; - border-color: #a1a1a1; - background-image: linear-gradient(to bottom, #d6d6d6, #e0e0e0); - text-shadow: 0 1px rgba(255, 255, 255, 0.76923); - icon-shadow: 0 1px rgba(255, 255, 255, 0.76923); - box-shadow: inset 0 2px 1px -2px rgba(0, 0, 0, 0.6), 0 1px white; } - .spinbutton.vertical .button:last-child:hover { + .spinbutton.vertical .button:first-child:active { + border-style: solid; + color: #2e3436; + border-color: #a1a1a1; + background-image: linear-gradient(to bottom, #d6d6d6, #e0e0e0); + text-shadow: 0 1px rgba(255, 255, 255, 0.76923); + icon-shadow: 0 1px rgba(255, 255, 255, 0.76923); + box-shadow: inset 0 2px 1px -2px rgba(0, 0, 0, 0.6); } + .spinbutton.vertical .button:first-child:hover { + border-style: solid; + color: #2e3436; + border-color: #a1a1a1; + background-image: linear-gradient(to bottom, white, #f7f7f7 40%, #ededed); + text-shadow: 0 1px rgba(255, 255, 255, 0.76923); + icon-shadow: 0 1px rgba(255, 255, 255, 0.76923); + box-shadow: inset 0 1px white; } + .spinbutton.vertical .button:first-child:insensitive { + border-style: solid; + color: #8d9091; + border-color: #a1a1a1; + background-image: linear-gradient(to bottom, #f4f4f4); + text-shadow: none; + icon-shadow: none; + box-shadow: inset 0 1px rgba(255, 255, 255, 0); } + .spinbutton.vertical .button:first-child:backdrop { + border-style: solid; + color: #54595a; + border-color: #a8a8a8; + background-image: linear-gradient(to bottom, #ededed); + text-shadow: none; + icon-shadow: none; + box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); } + .spinbutton.vertical .button:last-child { border-style: solid; + border-width: 1px; color: #2e3436; + background-image: linear-gradient(to bottom, #fafafa, #ededed 40%, #e0e0e0); border-color: #a1a1a1; - background-image: linear-gradient(to bottom, white, #f7f7f7 40%, #ededed); text-shadow: 0 1px rgba(255, 255, 255, 0.76923); icon-shadow: 0 1px rgba(255, 255, 255, 0.76923); box-shadow: inset 0 1px white, 0 1px white; } - .spinbutton.vertical .button:last-child:insensitive { - border-style: solid; - color: #8d9091; - border-color: #a1a1a1; - background-image: linear-gradient(to bottom, #f4f4f4); - text-shadow: none; - icon-shadow: none; - box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px white; } - .spinbutton.vertical .button:last-child:backdrop { + .spinbutton.vertical .button:last-child:active { + border-style: solid; + color: #2e3436; + border-color: #a1a1a1; + background-image: linear-gradient(to bottom, #d6d6d6, #e0e0e0); + text-shadow: 0 1px rgba(255, 255, 255, 0.76923); + icon-shadow: 0 1px rgba(255, 255, 255, 0.76923); + box-shadow: inset 0 2px 1px -2px rgba(0, 0, 0, 0.6), 0 1px white; } + .spinbutton.vertical .button:last-child:hover { + border-style: solid; + color: #2e3436; + border-color: #a1a1a1; + background-image: linear-gradient(to bottom, white, #f7f7f7 40%, #ededed); + text-shadow: 0 1px rgba(255, 255, 255, 0.76923); + icon-shadow: 0 1px rgba(255, 255, 255, 0.76923); + box-shadow: inset 0 1px white, 0 1px white; } + .spinbutton.vertical .button:last-child:insensitive { + border-style: solid; + color: #8d9091; + border-color: #a1a1a1; + background-image: linear-gradient(to bottom, #f4f4f4); + text-shadow: none; + icon-shadow: none; + box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px white; } + .spinbutton.vertical .button:last-child:backdrop { + border-style: solid; + color: #54595a; + border-color: #a8a8a8; + background-image: linear-gradient(to bottom, #ededed); + text-shadow: none; + icon-shadow: none; + box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); } + .spinbutton.vertical .button:backdrop:insensitive { border-style: solid; - color: #54595a; + color: #c7c7c7; border-color: #a8a8a8; - background-image: linear-gradient(to bottom, #ededed); - text-shadow: none; - icon-shadow: none; + background-image: linear-gradient(to bottom, #f4f4f4); box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); } - .spinbutton.vertical .button:backdrop:insensitive { - border-style: solid; - color: #c7c7c7; - border-color: #a8a8a8; - background-image: linear-gradient(to bottom, #f4f4f4); - box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); } .spinbutton.vertical.entry { - border-radius: 0; } + border-radius: 0; + padding-left: 3px; + padding-right: 3px; } .spinbutton.vertical .button:first-child, .spinbutton.vertical .button:first-child:active, .spinbutton.vertical .button:first-child:hover, .spinbutton.vertical .button:first-child:insensitive, .spinbutton.vertical .button:first-child:backdrop { border-radius: 3px 3px 0 0; border-bottom-width: 0; } @@ -801,8 +809,8 @@ GtkComboBox { text-shadow: 0 1px rgba(255, 255, 255, 0.76923); icon-shadow: 0 1px rgba(255, 255, 255, 0.76923); } GtkComboBox > .button { - padding-top: 2px; - padding-bottom: 2px; } + padding-top: 3px; + padding-bottom: 4px; } GtkComboBox:insensitive { color: #8d9091; text-shadow: none; @@ -1638,92 +1646,92 @@ GtkSwitch { .check { background-image: -gtk-scaled(url("assets/checkbox-unchecked.png"), url("assets/checkbox-unchecked@2.png")); background-repeat: no-repeat; - background-position: center; } + background-position: center center; } .check:hover { background-image: -gtk-scaled(url("assets/checkbox-unchecked-hover.png"), url("assets/checkbox-unchecked-hover@2.png")); background-repeat: no-repeat; - background-position: center; } + background-position: center center; } .check:selected { background-image: -gtk-scaled(url("assets/checkbox-unchecked-active.png"), url("assets/checkbox-unchecked-active@2.png")); background-repeat: no-repeat; - background-position: center; } + background-position: center center; } .check:insensitive { background-image: -gtk-scaled(url("assets/checkbox-unchecked-insensitive.png"), url("assets/checkbox-unchecked-insensitive@2.png")); background-repeat: no-repeat; - background-position: center; } + background-position: center center; } .check:backdrop { background-image: -gtk-scaled(url("assets/checkbox-unchecked-backdrop.png"), url("assets/checkbox-unchecked-backdrop@2.png")); background-repeat: no-repeat; - background-position: center; } + background-position: center center; } .check:backdrop:insensitive { background-image: -gtk-scaled(url("assets/checkbox-unchecked-backdrop-insensitive.png"), url("assets/checkbox-unchecked-backdrop-insensitive@2.png")); background-repeat: no-repeat; - background-position: center; } + background-position: center center; } .check:inconsistent { background-image: -gtk-scaled(url("assets/checkbox-mixed.png"), url("assets/checkbox-mixed@2.png")); background-repeat: no-repeat; - background-position: center; } + background-position: center center; } .check:inconsistent:hover { background-image: -gtk-scaled(url("assets/checkbox-mixed-hover.png"), url("assets/checkbox-mixed-hover@2.png")); background-repeat: no-repeat; - background-position: center; } + background-position: center center; } .check:inconsistent:selected { background-image: -gtk-scaled(url("assets/checkbox-mixed-active.png"), url("assets/checkbox-mixed-active@2.png")); background-repeat: no-repeat; - background-position: center; } + background-position: center center; } .check:inconsistent:backdrop { background-image: -gtk-scaled(url("assets/checkbox-mixed-backdrop.png"), url("assets/checkbox-mixed-backdrop@2.png")); background-repeat: no-repeat; - background-position: center; } + background-position: center center; } .check:inconsistent:insensitive { background-image: -gtk-scaled(url("assets/checkbox-mixed-insensitive.png"), url("assets/checkbox-mixed-insensitive@2.png")); background-repeat: no-repeat; - background-position: center; } + background-position: center center; } .check:inconsistent:insensitive:backdrop { background-image: -gtk-scaled(url("assets/checkbox-mixed-backdrop-insensitive.png"), url("assets/checkbox-mixed-backdrop-insensitive@2.png")); background-repeat: no-repeat; - background-position: center; } + background-position: center center; } .check:active { background-image: -gtk-scaled(url("assets/checkbox-checked.png"), url("assets/checkbox-checked@2.png")); background-repeat: no-repeat; - background-position: center; } + background-position: center center; } .check:active:insensitive { background-image: -gtk-scaled(url("assets/checkbox-checked-insensitive.png"), url("assets/checkbox-checked-insensitive@2.png")); background-repeat: no-repeat; - background-position: center; } + background-position: center center; } .check:hover:active { background-image: -gtk-scaled(url("assets/checkbox-checked-hover.png"), url("assets/checkbox-checked-hover@2.png")); background-repeat: no-repeat; - background-position: center; } + background-position: center center; } .check:active:selected { background-image: -gtk-scaled(url("assets/checkbox-checked-active.png"), url("assets/checkbox-checked-active@2.png")); background-repeat: no-repeat; - background-position: center; } + background-position: center center; } .check:backdrop:active { background-image: -gtk-scaled(url("assets/checkbox-checked-backdrop.png"), url("assets/checkbox-checked-backdrop@2.png")); background-repeat: no-repeat; - background-position: center; } + background-position: center center; } .check:backdrop:active:insensitive { background-image: -gtk-scaled(url("assets/checkbox-checked-backdrop-insensitive.png"), url("assets/checkbox-checked-backdrop-insensitive@2.png")); background-repeat: no-repeat; - background-position: center; } + background-position: center center; } .menuitem.check { color: rgba(46, 52, 54, 0.1); @@ -1792,92 +1800,92 @@ GtkSwitch { .radio { background-image: -gtk-scaled(url("assets/radio-unchecked.png"), url("assets/radio-unchecked@2.png")); background-repeat: no-repeat; - background-position: center; } + background-position: center center; } .radio:hover { background-image: -gtk-scaled(url("assets/radio-unchecked-hover.png"), url("assets/radio-unchecked-hover@2.png")); background-repeat: no-repeat; - background-position: center; } + background-position: center center; } .radio:selected { background-image: -gtk-scaled(url("assets/radio-unchecked-active.png"), url("assets/radio-unchecked-active@2.png")); background-repeat: no-repeat; - background-position: center; } + background-position: center center; } .radio:insensitive { background-image: -gtk-scaled(url("assets/radio-unchecked-insensitive.png"), url("assets/radio-unchecked-insensitive@2.png")); background-repeat: no-repeat; - background-position: center; } + background-position: center center; } .radio:backdrop { background-image: -gtk-scaled(url("assets/radio-unchecked-backdrop.png"), url("assets/radio-unchecked-backdrop@2.png")); background-repeat: no-repeat; - background-position: center; } + background-position: center center; } .radio:backdrop:insensitive { background-image: -gtk-scaled(url("assets/radio-unchecked-backdrop-insensitive.png"), url("assets/radio-unchecked-backdrop-insensitive@2.png")); background-repeat: no-repeat; - background-position: center; } + background-position: center center; } .radio:inconsistent { background-image: -gtk-scaled(url("assets/radio-mixed.png"), url("assets/radio-mixed@2.png")); background-repeat: no-repeat; - background-position: center; } + background-position: center center; } .radio:inconsistent:hover { background-image: -gtk-scaled(url("assets/radio-mixed-hover.png"), url("assets/radio-mixed-hover@2.png")); background-repeat: no-repeat; - background-position: center; } + background-position: center center; } .radio:inconsistent:selected { background-image: -gtk-scaled(url("assets/radio-mixed-active.png"), url("assets/radio-mixed-active@2.png")); background-repeat: no-repeat; - background-position: center; } + background-position: center center; } .radio:inconsistent:backdrop { background-image: -gtk-scaled(url("assets/radio-mixed-backdrop.png"), url("assets/radio-mixed-backdrop@2.png")); background-repeat: no-repeat; - background-position: center; } + background-position: center center; } .radio:inconsistent:insensitive { background-image: -gtk-scaled(url("assets/radio-mixed-insensitive.png"), url("assets/radio-mixed-insensitive@2.png")); background-repeat: no-repeat; - background-position: center; } + background-position: center center; } .radio:inconsistent:insensitive:backdrop { background-image: -gtk-scaled(url("assets/radio-mixed-backdrop-insensitive.png"), url("assets/radio-mixed-backdrop-insensitive@2.png")); background-repeat: no-repeat; - background-position: center; } + background-position: center center; } .radio:active { background-image: -gtk-scaled(url("assets/radio-checked.png"), url("assets/radio-checked@2.png")); background-repeat: no-repeat; - background-position: center; } + background-position: center center; } .radio:active:insensitive { background-image: -gtk-scaled(url("assets/radio-checked-insensitive.png"), url("assets/radio-checked-insensitive@2.png")); background-repeat: no-repeat; - background-position: center; } + background-position: center center; } .radio:hover:active { background-image: -gtk-scaled(url("assets/radio-checked-hover.png"), url("assets/radio-checked-hover@2.png")); background-repeat: no-repeat; - background-position: center; } + background-position: center center; } .radio:active:selected { background-image: -gtk-scaled(url("assets/radio-checked-active.png"), url("assets/radio-checked-active@2.png")); background-repeat: no-repeat; - background-position: center; } + background-position: center center; } .radio:backdrop:active { background-image: -gtk-scaled(url("assets/radio-checked-backdrop.png"), url("assets/radio-checked-backdrop@2.png")); background-repeat: no-repeat; - background-position: center; } + background-position: center center; } .radio:backdrop:active:insensitive { background-image: -gtk-scaled(url("assets/radio-checked-backdrop-insensitive.png"), url("assets/radio-checked-backdrop-insensitive@2.png")); background-repeat: no-repeat; - background-position: center; } + background-position: center center; } .menuitem.radio { color: rgba(46, 52, 54, 0.1); @@ -1944,7 +1952,7 @@ GtkSwitch { color: #54595a; } GtkCheckButton.text-button, GtkRadioButton.text-button { - padding: 1px; + padding: 1px 2px 4px; outline-offset: 0; } /************ -- 2.30.2